<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>회원가입</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ko"></script>
	<script type="text/javascript">
	
	
	
	
	$(document).ready(function(){
			$.mobile.fixedToolbars
			  .setTouchToggleEnabled(false);
			
			initialize();
			//get_address();
	});
	
	//-------------------------------
	
	function sumit_action(){
		
		$('#user_id').val(
				$('#user_id_1').val() + $('#user_id_2').val() + $('#user_id_3').val()			
		);
		
		var f = document.forms['login'];
		f.submit();
	}
	
	function cancel_action(){
		var f = document.forms['login'];
		f.action = './index.html';
		f.submit(); 
	}
	
	
	  
	 var marker;
	  var map;
	  var current_loc;
	  var geocoder;

	  function initialize() {
	
		  
	  geocoder = new google.maps.Geocoder();
		  
	  navigator.geolocation.getCurrentPosition(function(position) {
		    current_position = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
		    //current_position = new google.maps.LatLng(37.566535, 126.977969);
		    
		    
		    var mapOptions = {
		  	      zoom: 16,
		  	      mapTypeId: google.maps.MapTypeId.ROADMAP,
		  	      center: current_position
		  	    };

		  	    map = new google.maps.Map(document.getElementById("map_canvas"),
		  	            mapOptions);
		  	    
		  	  marker = new google.maps.Marker({
			      map:map,
			      draggable:false,
			      animation: google.maps.Animation.DROP,
			      position: current_position
			    });
			    //google.maps.event.addListener(marker, 'click', toggleBounce);
			    
			    google.maps.event.addListener(map, 'click', function(event) {
			    	 
			    	//marker.setPosition(event.latLng);
			    	marker.setPosition(event.latLng);
			    	map.setCenter(event.latLng);
			    	map.setZoom(16);
			    	
			    	//alert(event.latLng.lat());
			    	$('#user_loc_gps_1').val(event.latLng.lat());
			    	$('#user_loc_gps_2').val(event.latLng.lng());
			    	//test
			    	codeLatLng();
//			    	map.setZoom(16);
			    });

		    
	    });
	    	          
	  };
	  
	  
	  
	  
	//gps -> 주소
	function codeLatLng() {
		var input_1 = parseFloat( document.getElementById("user_loc_gps_1").value );
		var input_2 = parseFloat( document.getElementById("user_loc_gps_2").value );
		var latlng = new google.maps.LatLng(input_1, input_2);
		geocoder.geocode({'latLng': latlng}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				if (results[1]) {
					map.setZoom(16);
					
					marker.setOptions({
						map:null,
						visible:false
					});
					marker = null;
					
					marker = new google.maps.Marker({
					position: latlng,
					map: map
				});
				document.getElementById('loc_nm').value = results[0].formatted_address.replace('대한민국 ','');
				$('#address_field').html('<font size="2">' +  results[0].formatted_address.replace('대한민국 ','') + '</font>');
				infowindow.setContent(results[1].formatted_address);
				infowindow.open(map, marker);
				}
			} else {
			alert("Geocoder failed due to: " + status);
			}
		});
	}
	  
	  
	  //주소 -> gps
	  function codeAddress() {
		    var address = document.getElementById("loc_nm").value;
		    geocoder.geocode( { 'address': address}, function(results, status) {
		      if (status == google.maps.GeocoderStatus.OK) {
		        map.setCenter(results[0].geometry.location);
		        marker.setOptions({
					map:null,
					visible:false
				});
				marker = null;
		        marker = new google.maps.Marker({
		            map: map, 
		            position: results[0].geometry.location
		        });
		      } else {
		        alert("Geocode was not successful for the following reason: " + status);
		      }
	 });
	  //샘플주소 http://code.google.com/intl/ko/apis/maps/documentation/javascript/examples/geocoding-simple.html
	
	  
	  function handleNoGeolocation(errorFlag) {
		    if (errorFlag == true) {
		      alert("지도 서비스 동작중 오류가 발생하였습니다..");
		      
		    } else {
		      alert("위치정보를 지원하지 않는 기기로 접속하였습니다..");
		    }
		    map.setCenter(new google.maps.LatLng(37.566535, 126.977969));
	  }
	  function toggleBounce() {

	    if (marker.getAnimation() != null) {
	      marker.setAnimation(null);
	    } else {
	      marker.setAnimation(google.maps.Animation.BOUNCE);
	    }
	  }
	 }
	 
		
	 
		
		
	</script>
	
	<script type="text/javascript">
	</script>
	
	<style type="text/css">
#dashed{
	border-style: dashed;
	border-spacing:10px;
	border-width : 1px;
	padding-bottom: 15px; 
	padding-left: 15px; 
	padding-top: 15px;
	width: 400px;
	height: 95%;
	text-align:center;
}
	</style>
  </head>
  <body>
   	<section data-role="page" id="join" data-fullscreen="false">
   		<form name="login" method="post" action='<c:out value="${SPRINGMVC }"/>/client/insert_user_join'>
   		<div class="contents" data-role="content" style="position:relative;">
		  				<div id="dashed">
			  				<table  id="collapse" style="border:1px solid;width:350px;background-color:#FFFFFF;">
			  					<colgroup>
			  						<col width="100px">
			  						<col width="250px">
			  					</colgroup>
			  					<tr>
			  							<td align="left">아이디<br>전화번호</td>
			  						<td>
			  							<input type="hidden" name="user_id" id="user_id" style="width:80%">
			  							<table>
											<tr>
												<td><input type="tel" id="user_id_1"  style="width:60%;" data-inline="true"/></td>
												<td>-</td>
												<td><input type="tel" id="user_id_2"  style="width:60%;" data-inline="true"/></td>
												<td>-</td>
												<td><input type="tel" id="user_id_3"  style="width:60%;" data-inline="true"/></td>
											</tr>
										</table>
			  						</td>
			  					</tr>
			  					<tr>
			  						<td align="left">비밀번호</td>
			  						<td>
			  							<input type="text" name="user_pw" id="user_pw" style="width:80%">
			  						</td>
			  					</tr>
			  					<tr>
			  						<td align="left">비밀번호<br>(확인)</td>
			  						<td>
			  							<input type="text" name="user_pwd_chck"  style="width:80%">
			  						</td>
			  					</tr>
			  					<tr>
			  						<td align="left">이메일</td>
			  						<td>
			  							<input type="email" name="email" style="width:80%">
			  						</td>
			  					</tr>
			  					<tr>
			  						<td align="left">지역</td>
			  						<td>
			  							<table>
			  								<colgroup>
			  									<col width="20%">
			  									<col width="*">
			  									<col width="30%">
			  								</colgroup>
											<tr>
												<td colspan="2">
													<input type="text" name="user_loc" id="loc_nm"  value="" 
														onkeyup="javascript:if(event.keyCode==13){codeAddress();};"
													style="width: 90%" data-inline="true" placeholder="방배동" required >
												</td>
												<td>
													<input type="button" value="검색"  onclick="javascript:codeAddress();" />
												</td>
											</tr>
										</table> 
			  							<input type="hidden" name="user_loc_gps_1" id="user_loc_gps_1" value="">
			  							<input type="hidden" name="user_loc_gps_2" id="user_loc_gps_2" value="">
			  							<span id="address_field"></span>
			  							
			  							<div id="map_canvas" style="width:200px; height: 250px;margin-top:5px; margin-left:5px;">
			  								
			  							</div>
			  						</td>
			  					</tr>
			  				</table>
			  					<input type="button" data-inline="true" data-inline="true" data-icon="plus" value="확인" onclick="javascript:sumit_action();">
								<input type="button" name="reset_button" value="취소" data-inline="true" data-icon="refresh" onclick="javascript:cancel_action();">
						</div>
					</div>
  			</form>
   	</section>
  </body>
</html>